<template>
  <div class="edit-group">
    <a-collapse v-model:active-key="currentKey">
      <a-collapse-panel
        v-for="(item, index) in editGroups"
        :key="`item-${index}`"
        :header="item.text"
      >
        <props-table :props="item.props" @change="handleChange" />
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script lang="ts">
import { AllComponentProps } from "../defaultProps";
import { computed, defineProps, withDefaults, ref, defineEmits } from "vue";
import { difference } from "lodash-es";
import PropsTable from "./PropsTable.vue";
// import PropsTable from "./PropsTableTS";
import {
  Collapse as ACollapse,
  CollapsePanel as ACollapsePanel,
} from "ant-design-vue";

export interface GroupProps {
  text: string;
  items: string[];
}
export const defaultEditGroups: GroupProps[] = [
  {
    text: "尺寸",
    items: [
      "height",
      "width",
      "paddingLeft",
      "paddingRight",
      "paddingTop",
      "paddingBottom",
    ],
  },
  {
    text: "边框",
    items: ["borderStyle", "borderColor", "borderWidth", "borderRadius"],
  },
  {
    text: "阴影与透明度",
    items: ["opacity", "boxShadow"],
  },
  {
    text: "位置",
    items: ["left", "top"],
  },
  {
    text: "事件功能",
    items: ["actionType", "url"],
  },
];
export default {
  name: "EditGroup",
  
};

</script>
<script lang="ts" setup>
const props = 
withDefaults(
  defineProps<{
    props: Partial<AllComponentProps>;
    groups?: GroupProps[];
  }>(),
  {
    groups: ()=>defaultEditGroups,
  }
);
const currentKey = ref("item-0");
const emit = defineEmits(["change"]);
const newGroups = computed(() => {
  const allNormalProps = props.groups.reduce((prev, current) => {
    return [...prev, ...current.items];
  }, [] as string[]);
  const specialProps = difference(Object.keys(props.props), allNormalProps);
  return [
    {
      text: "基本属性",
      items: specialProps,
    },
    ...props.groups,
  ];
});

const editGroups = computed(() => {
  return newGroups.value.map((groups) => {
    const propsMap = {} as any;
    groups.items.forEach((item) => {
      const key = item as keyof AllComponentProps;
      propsMap[key] = props.props[key];
    });
    return {
      ...groups,
      props: propsMap,
    };
  });
});

const handleChange = (a: any) => {
  emit("change", a);
};
</script>
<style scoped lang="less"></style>
